<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Modal from '../components/Modal.vue'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const error = ref('')
const preview = ref(null)
const modalVisible = ref(false)
const modalMessage = ref('')

const form = ref({
  guest_name: '',
  phone: '',
  agree: true
})

const queryParams = computed(() => ({
  hotel_id: route.query.hotel_id,
  room_type_id: route.query.room_type_id,
  check_in_date: route.query.check_in_date,
  check_out_date: route.query.check_out_date,
  rooms: Number(route.query.rooms || 1)
}))

const fetchPreview = async () => {
  loading.value = true
  error.value = ''
  try {
    const res = await fetch('http://localhost:8000/orders/hotel/preview', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(queryParams.value)
    })
    const data = await res.json()
    if (data.code === 200) {
      preview.value = data.data
    } else {
      error.value = data.message || '试算失败'
    }
  } catch (e) {
    console.error(e)
    error.value = '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}

const showModal = (message) => {
  modalMessage.value = message
  modalVisible.value = true
}

const goToPayment = () => {
  if (!form.value.guest_name || !form.value.phone) {
    showModal('请填写入住人和联系电话')
    return
  }
  if (!preview.value) return
  
  // 跳转到支付页面，传递订单信息和填写的信息
  router.push({
    path: '/payment',
    query: {
      hotel_id: queryParams.value.hotel_id,
      room_type_id: queryParams.value.room_type_id,
      check_in_date: queryParams.value.check_in_date,
      check_out_date: queryParams.value.check_out_date,
      rooms: queryParams.value.rooms,
      guest_name: form.value.guest_name,
      phone: form.value.phone
    }
  })
}

onMounted(() => {
  fetchPreview()
})
</script>

<template>
  <div class="order-confirm-page">
    <header class="page-header">
      <div class="header-content">
        <button class="back-btn" @click="router.back()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <h1 class="page-title">订单确认</h1>
        <div class="header-placeholder"></div>
      </div>
    </header>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">
      <div>{{ error }}</div>
      <button class="retry-btn" @click="fetchPreview">重试</button>
    </div>

    <div v-else-if="preview" class="content">
      <section class="hotel-card">
        <div class="thumb">
          <img :src="preview.hotel.images?.[0]?.image_url || 'https://via.placeholder.com/96x72?text=Hotel'">
        </div>
        <div class="info">
          <div class="title">{{ preview.hotel.hotel_name }}</div>
          <div class="addr">📍 {{ preview.hotel.city }} {{ preview.hotel.address }}</div>
          <div class="room">{{ preview.room_type.name }} ｜ ¥{{ preview.room_type.price }}/晚</div>
          <div class="stay">入住 {{ preview.stay.check_in_date }} · 退房 {{ preview.stay.check_out_date }} · 共 {{ preview.stay.nights }} 晚</div>
        </div>
      </section>

      <section class="form-card">
        <div class="form-item">
          <label>住客姓名</label>
          <input v-model="form.guest_name" placeholder="请输入住客姓名" />
        </div>
        <div class="form-item">
          <label>联系电话</label>
          <input v-model="form.phone" placeholder="请输入手机号" />
        </div>
      </section>

      <section class="amount-card">
        <div class="row">
          <span>房费</span>
          <span>¥{{ preview.amounts.base_amount.toFixed(2) }}</span>
        </div>
        <div class="row discount" v-if="preview.amounts.discount > 0">
          <span>优惠</span>
          <span>-¥{{ preview.amounts.discount.toFixed(2) }}</span>
        </div>
        <div class="row total">
          <span>应付金额</span>
          <span class="payable">¥{{ preview.amounts.payable.toFixed(2) }}</span>
        </div>
      </section>

      <div class="submit-bar">
        <div class="payable">¥{{ preview.amounts.payable.toFixed(2) }}</div>
        <button class="submit-btn" @click="goToPayment">去支付</button>
      </div>
    </div>

    <Modal
      v-model:visible="modalVisible"
      :message="modalMessage"
    />
  </div>
</template>

<style scoped>
.order-confirm-page { min-height: 100vh; background: #f5f5f5; }
.page-header { background: #fff; border-bottom: 1px solid #e8e8e8; position: sticky; top: 0; z-index: 100; }
.header-content { max-width: 375px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; height: 56px; }
.back-btn { background: none; border: none; padding: 8px; cursor: pointer; color: #333; display:flex; align-items:center; justify-content:center; }
.page-title { font-size: 18px; font-weight: 600; color: #333; margin: 0; }
.header-placeholder { width: 36px; }
.loading, .error { padding: 40px 16px; text-align: center; }
.retry-btn { margin-top: 12px; background: #1890ff; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.content { max-width: 375px; margin: 0 auto; padding-bottom: 72px; }
.hotel-card { background: #fff; margin: 12px 12px 0; border-radius: 12px; padding: 12px; display: flex; gap: 12px; }
.thumb { width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: #f0f0f0; flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.title { font-weight: 700; color: #333; }
.addr, .room, .stay { font-size: 12px; color: #666; }
.form-card { background: #fff; margin: 12px; border-radius: 12px; padding: 12px; }
.form-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.form-item:last-child { border-bottom: none; }
.form-item label { width: 80px; color: #333; font-size: 14px; }
.form-item input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; }
.amount-card { background: #fff; margin: 12px; border-radius: 12px; padding: 12px; }
.row { display: flex; justify-content: space-between; padding: 8px 0; color: #333; }
.row.discount { color: #ff4d4f; }
.row.total { font-weight: 700; }
.payable { color: #ff6b35; font-weight: 700; }
.submit-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.submit-btn { background: #1890ff; color: #fff; border: none; border-radius: 8px; padding: 10px 16px; }
</style>





